<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        transform: translateZ(100px);
        background: url("https://images.unsplash.com/photo-1496715976403-7e36dc43f17b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2340&q=80") no-repeat;
        background-size: cover;
      }

      .box {
        position: relative;
        width: 800px;
        height: 420px;
        margin: 10% auto;
      }
      .left {
       position: absolute;
       
        padding: 30px;
        width: 340px;
        height: 360px;
        background: rgba(0, 0, 0, 0.3);
        transition: all 2s;
      }
      .right {
        position: absolute;
        left: 400px;
        padding: 30px;
        width: 340px;
        height: 360px;
        transition: all 2s;
        background-color: #f5f5f5;
      }
      #btn1 {
        width: 159px;
        height: 47px;
        margin-top: 180px;
        margin-left: 90px;
        background-color: var(--blue);
        background-image: linear-gradient(90deg, lightblue, blue);
        border-radius: 20px;
        border: 0;
        color: white;
      }
      h2 {
        width: 100%;
        height: 30px;
        font-weight: 100;
        text-align: center;
        line-height: 30px;
        margin-top: 30px;
      }
      .inputs {
        width: 330px;
        height: 43px;
        margin-top: 20px; 
        border: 1px solid #ccc;
        outline-color:blue ;
      }
      #btn2 {
        width: 159px;
        height: 47px;
        margin-left: 90px;
        margin-top: 20px;
        background-color: var(--blue);
        background-image: linear-gradient(90deg, lightblue, blue);
        border-radius: 20px;
        border: 0;
        color: white;
      }
      span {
        display: block;
        width: 100%;
        height: 40px;
        margin-top: 20px;
        text-align: center;
      }
      .aa {
        transform: translateX(-400px);
        transition: all 2s;
      }
      .bb {
        transform: translateX(400px);
        transition: all 2s;
      }
      button {
        width: 159px;
        height: 47px;

        margin-top: 20px;
        background-color: var(--blue);
        background-image: linear-gradient(90deg, lightblue, blue);
        border-radius: 20px;
        border: 0;
        color: white;
        cursor: pointer;
      }
      #yan{
        float: left;
        width: 160px;
        height: 43px;
        margin-top: 20px;
        border: none;
      }
      #captcha{
        float: left;
        width: 160px;
        height: 43px;
        margin-top: 20px;
        margin-left: 10px;
        background-color: #fff;
        text-align: center;
        line-height: 43px;
        color: red;
        cursor: pointer;
        border: 1px solid blue;
      }
      #captcha img{
        width: 100%;
        height: 100%;
      }
      .tishi{
        display: none;
        position: fixed;
        top: -80px;
        left: 40%;
        width: 300px;
        height: 66px;
        color: white;
        font-size: 16px;
        text-align: center;
        line-height: 66px;
        z-index: 9999;
        background-color: rgba(0, 0, 0, 0.6);
      }
      #xpan{
        position: absolute;
        top: 268px;
        left: 138px;
        display: block;
        margin-top: 30px;
      }
    </style>
      <script src="jquery-3.6.1.min.js"></script>
  </head>
  <body>
    <div class="tishi"></div>
    <div class="box">
      <div class="left">
        <button id="btn1">登录</button>
      </div>
      <div id="key"></div>
      <div class="right">
        <h2>注册</h2>
        <input type="text" class="inputs" id="username" />
        <input type="password" class="inputs" id="password" />
        <div><input type="text"  id="yan"><span id="captcha"><img  ></img><span></div>
        <button id="btn2">注册</button>
      </div>
    </div>

  </body>
  <script src="../js文件/彩带特效.js"></script>
  <script>
  
    $(function(){
        //给内容加点击事件
        $('.right').click(rightFun)
        //点击切换
        $('#btn1').click(btn1Fun)
        //获取验证码
        $('#captcha').click(captchaFun)
        captchaFun()
    })
    var key=null
    var user=null
    var pwd=null
    //点击登录 注册两不误
    function rightFun(){
        let e=$(event.target)
        if(e.html()=='注册'){
           user= $('#username').val()
           pwd=$('#password').val()
            let data={
        username:$('#username').val(),
        password:$('#password').val(),
        captcha:$('#yan').val(),
        key:key,
       }
       $.ajax({
        url:'https://api.zzgoodqc.cn/api/user',
        type:'post',
        data:data,
        success:function(res){
            console.log(res);
            if(res.code==200){
                    denglu()
                    captchaFun()
                    tishi('注册成功','green')
                }else{
                    captchaFun()
                    tishi(res.message,'red')
                }
        },
        dataType:'json'
       })
        }else if(e.html()=='登录'){
            let data={
        username:$('#username').val(),
        password:$('#password').val(),
        captcha:$('#yan').val(),
        key:key,
       }
       $.ajax({
        url:'https://api.zzgoodqc.cn/api/login',
        type:'post',
        data:data,
        success:function(res){
            console.log(res);
            if(res.code==200){
                localStorage.setItem('user',JSON.stringify(res.data))
                localStorage.setItem('token',res.data.token)
                alert('登陆成功')
                location.href='layui布局列表.html'
             $('#username').val('')
             $('#password').val('')
             $('#yan').val('')
            }else{
               tishi(res.message,'red') 
                captchaFun()
            }
        },
        dataType:'json'
       })
        }
    }
    //点击来回切换
    function denglu(){
        $('.left').animate({left:'400px'},100,'linear')
            $('.right').animate({left:'0'},100,'linear')
            $('.right').html(`
            <h2>登录</h2>
            <input type="text" class="inputs" id="username" value="${user}"> 
            <input type="password" class="inputs" id="password" value="${pwd}"> 
            <div><input type="text"  id="yan"><span id="captcha" onclick="captchaFun()"><img  ></img><span></div>
            <span id="xpan">忘记密码?</span>
            <button style="margin:50px 0 0 80px" id="btn2">登录</button>
        `)
        setTimeout(function(){
            $('#btn1').html('注册')
        },500)
        captchaFun()
    }
    //点击来回切换
    function btn1Fun(){
        if($('#btn1').html()=='登录'){
           denglu()
        }else{
            $('.left').animate({left:'0px'},100,'linear')
            $('.right').animate({left:'400px'},100,'linear')
            $('.right').html(`
            <h2>注册</h2>
        <input type="text" class="inputs" id="username" />
        <input type="password" class="inputs" id="password" />
        <div><input type="text"  id="yan"><span onclick="captchaFun()" id="captcha"><img  ></img><span></div>
        <button id="btn2">注册</button>
        `)
        setTimeout(function(){
            $('#btn1').html('登录')
        },500)
        captchaFun()
        }
        $('#username').val('')
        $('#password').val('')
        $('#yan').val('')
    }
    //获取验证码
    function captchaFun(){
        $.ajax({
            url:'https://api.zzgoodqc.cn/api/captcha',
            type:'get',
            success:function(res){
                if(res.code==200){
                    key=res.data.key
                    $('#captcha').children().prop('src',res.data.img)
                }
            },
            dataType:'json'
        })
    }
    var flog=true
    function tishi(obj,bcolor){
      if(flog){
        $('.tishi').show()
      $('.tishi').html(obj)
      $('.tishi').css('color',bcolor)
      setTimeout(function(){
        $('.tishi').hide()
        flog=true
      },2000)
      flog=false
      }
    }
  </script>
</html>
